<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html,
    body,
    #app {
      margin: 0;
      padding: 0px;
      height: 100%;
    }

    .header {
      height: 50px;
      background-color: #545c64;
      line-height: 50px;
      text-align: center;
      font-size: 24px;
      color: #fff;
    }

    .footer {
      height: 40px;
      line-height: 40px;
      background-color: #888;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
    }

    .main {
      display: flex;
      position: absolute;
      top: 50px;
      bottom: 40px;
      width: 100%;
    }

    .content {
      flex: 1;
      text-align: center;
      height: 100%;
    }

    .left {
      flex: 0 0 20%;
      background-color: #545c64;
    }

    .left a {
      color: white;
      text-decoration: none;
    }

    .right {
      margin: 5px;
    }

    .btns {
      width: 100%;
      height: 35px;
      line-height: 35px;
      background-color: #f5f5f5;
      text-align: left;
      padding-left: 10px;
      box-sizing: border-box;
    }

    button {
      height: 30px;
      background-color: #ecf5ff;
      border: 1px solid lightskyblue;
      font-size: 12px;
      padding: 0 20px;
    }

    .main-content {
      margin-top: 10px;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul li {
      height: 45px;
      line-height: 45px;
      background-color: #a0a0a0;
      color: #fff;
      cursor: pointer;
      border-bottom: 1px solid #fff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    td,
    th {
      border: 1px solid #eee;
      line-height: 35px;
      font-size: 12px;
    }

    th {
      background-color: #ddd;
    }
  </style>
</head>

<body>
  <!-- 1.引入vue和vue-router -->
  <script src="../js/vue.js"></script>
  <script src="../js/vue-router.js"></script>
  <div id="app">
    <!-- 5. 路由占位 -->
    <router-view></router-view>
  </div>
  <script>
    // 2.创建组件
    const luyou = {
      template: `
      <div>
        <header class="header">传智后台管理系统</header>
        <div class="main">
          <div class="content left">
            <ul>
              <li><router-link to="/users">用户管理</router-link></li>
              <li><router-link to="/rights">权限管理</router-link></li>
              <li><router-link to="/goods">商品管理</router-link></li>
              <li><router-link to="/orders">订单管理</router-link></li>
              <li><router-link to="/settings">系统设置</router-link></li>
            </ul>
          </div>
          <div class="content right">
            <div class="main-content">
              <div>
                 <router-view />      
              </div>
            </div>
          </div>
        </div>
        <footer class="footer">版权信息</footer>
      </div>
  `,
    }
    // 5个小组件
    const users = {
      template: `<div><h2>用户管理界面</h2>
            <table>
              <thead>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>性别</th>
                  <th>操作</th>
              </thead>
              <tbody>
                  <tr v-for="item in list" :key="item.id">
                     <td>{{item.id}}</td>
                     <td>{{item.name}}</td> 
                     <td>{{item.age}}</td> 
                     <td>{{item.sex}}</td>
                     <td><a href="#" @click.prevent="goinfo(item.id)">详情信息</a></td>
                  </tr>
              </tbody>     
            </table>
      </div>`,
      methods: {
        goinfo(id) {
          // 编程式导航跳转到info
          this.$router.push('/info/' + id)
        }
      },
      data() {
        return {
          list: [{
              id: 1,
              name: '李逍遙',
              age: 25,
              sex: '男'
            },
            {
              id: 2,
              name: '景天',
              age: 20,
              sex: '男'
            },
            {
              id: 3,
              name: '龙阳',
              age: 1021,
              sex: '男'
            },
            {
              id: 4,
              name: '飞蓬',
              age: 2500,
              sex: '男'
            },
            {
              id: 5,
              name: '龙葵',
              age: 1019,
              sex: '女'
            },
          ]
        }
      }
    };
    const rights = {
      template: '<div>权限管理界面</div>'
    };
    const goods = {
      template: '<div>商品管理界面</div>'
    };
    const orders = {
      template: '<div>订单管理界面</div>'
    };
    const settings = {
      template: '<div>系统设置界面</div>'
    };
    const info = {
      props: ['id'],
      template: `<div>     
         <h2>用户详情页面---用户id为{{id}}</h2>
         <button @click="$router.back()">返回</button>
      </div>`
    }


    // 3.创建路由实例和路由规则
    const router = new VueRouter({
      routes: [{
        path: '/',
        component: luyou,
        redirect: '/users',
        children: [{
            path: '/users',
            component: users
          },
          {
            path: '/rights',
            component: rights
          },
          {
            path: '/goods',
            component: goods
          },
          {
            path: '/orders',
            component: orders
          },
          {
            path: '/settings',
            component: settings
          },
          {
            path: '/info/:id',
            component: info,
            props: true
          }
        ]
      }]
    })

    const vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
      // 4. 挂载路由
      router
    })
  </script>
</body>

</html>